<template>
  <slide-view @side-close="handleClose">
    <flex-box v-loading="loading" mode="column" align-items="stretch" class="detail-container">
      <!-- detail-header -->
      <div class="detail-header">
        <flex-box class="t-section">
          <div class="t-name"></div>
          <!-- <el-button class="head-handle-button" type="primary" @click.native="handleEdit">编辑</el-button> -->
          <img class="t-close" src="/image/close.png" @click="handleClose">
        </flex-box>
      </div>
      <!-- detail-content -->
      <div class="tabs">
        <el-tabs v-model="currentTabName">
          <el-tab-pane label="基本信息" name="ContractBaseInfo" />
        </el-tabs>
      </div>
      <div id="follow-log-content" class="t-loading-content">
        <keep-alive>
          <component :is="tabName" :id="id" :detail="detail" :customer="detail" />
        </keep-alive>
      </div>
    </flex-box>
    <contract-save v-if="editVisible" :id="detail.id" @callback="getDetail" @close="editVisible = false" />
  </slide-view>
</template>

<script>
import DetailMixin from '@/mixins/Detail'
import ContractBaseInfo from './ContractBaseInfo'
import ContractSave from './ContractSave.vue'
import ConContractApi from '@/api/contract/ConContractApi'

export default {
  name: 'ContractDetail',
  components: {
    ContractSave,
    ContractBaseInfo
  },
  mixins: [DetailMixin],
  data() {
    return {
      currentTabName: 'ContractBaseInfo',
      detail: {
        routePriceNewList: []
      }
    }
  },
  computed: {
    tabName() {
      if (this.currentTabName === 'ContractBaseInfo') {
        return 'ContractBaseInfo'
      }
      return ''
    }
  },
  mounted() {
    this.setApi(ConContractApi)
    if (this.id) {
      this.getDetail()
    }
  },
  methods: {
    handleTypeClick(type) {
      console.log('22')
      if (type === 'edit') {
        this.$emit('callback', { type: 'edit' })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tabs ::v-deep .el-tabs__nav-wrap::after {
  display: none !important;
}

.el-tabs ::v-deep .el-tabs__header {
  background-color: #F5F6F9;
  padding: 0 17px;
  margin: 0 0 15px !important;
}

.el-tabs ::v-deep .el-tabs__item {
  font-size: 13px !important;
  height: 40px !important;
  line-height: 40px !important;
}

</style>
